﻿
@{
    //ViewBag.Title = "ContractList";
    //Layout = "~/Views/Shared/_Layout_iframe.cshtml";
    Layout = null;
}
<style>

</style>
<div>
    <div style="padding: 20px">
        <div class="layui-card">
            <div class="layui-card-body">
                <h3>合同列表</h3>
                <table class="layui-hide" id="testContract" lay-filter="testContract"></table>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="toolbarDemoContract">

    <div class="layui-btn-container" style="width: auto;">
        <div class="layui-form-item" style="position: relative;">
            <label class="layui-form-label">产妇名</label>
            <div class="layui-input-inline">
                <input type="tel" name="ParturientName" lay-verify="ParturientName" autocomplete="off" class="layui-input" style="height: 30px;">
            </div>
            <label class="layui-form-label">电话</label>
            <div class="layui-input-inline">
                <input type="tel" name="ParturientPhone" lay-verify="ParturientPhone" autocomplete="off" class="layui-input">
            </div>
            <!-- 套餐下拉框 -->
            <label class="layui-form-label">套餐</label>
            <div class="layui-input-inline">
                <select name="PackageId" lay-verify="required">
                    <option value="">请选择套餐</option>
                    @foreach (var package in ViewBag.Packages as List<JinfuyuanProject.Entity.Package>)
                    {
                        <option value="@package.Id">@package.PackageName</option>
                    }
                </select>
            </div>
            <button class="layui-btn layui-btn-sm" lay-event="search">搜索</button>
            <button class="layui-btn layui-btn-sm" lay-event="add" style="position: fixed;right: 3%;">添加</button>
            
        </div>
    </div>

</script>
<script type="text/html" id="barDemoContract">
    <div class="layui-clear-space">

        {{#  if(d.PayState != 1) { }} <!-- 如果 PayState 不等于 1，则显示支付按钮 -->
        <a class="layui-btn layui-btn-xs" lay-event="pay">支付</a>
        {{#  } }}
        <a class="layui-btn layui-btn-xs" lay-event="spend">消费清单</a>
    </div>
</script>
<script type="text/html" id="tplManager">
    {{#  if(d.State ==0){ }}
    未入住
    {{#  } else { }}
    已入住
    {{#  } }}
</script>
@*zy 消费列表*@
<script type="text/html" id="tplsignstate">
    {{#  if(d.SignState ==0){}}
    未签约
    {{#  }else if(d.SignState ==1){}}
    已签约
    {{#  }else if(d.SignState ==2){}}
    已退房
    {{# } }}
</script>
<script>
        var table;
        layui.use(["table", "dropdown", 'util'], function () {
        table = layui.table;
            var dropdown = layui.dropdown;
            var util = layui.util;
        // 创建渲染实例
        table.render({
            elem: "#testContract",
            url: "/Contract/GetContractList", // 此处为静态模拟数据，实际使用时需换成真实接口
            toolbar: "#toolbarDemoContract",
          defaultToolbar: [],
          height: "full-35", // 最大高度减去其他容器已占有的高度差
          css: [
            // 重设当前表格样式
            ".layui-table-tool-temp{padding-right: 145px;}",
          ].join(""),
          cellMinWidth: 80,
          totalRow: true, // 开启合计行
            page: {
                limit: 10
            },
          cols: [
              [
                  { field: "ContractNumber", title: "合同编号" },
                  { field: "ParturientName",  title: "产妇名称" },
                  { field: "Name", title: "房间号" },
                  { field: "PackageName", title: "套餐" },
                  { field: "Deposit", title: "押金" },
                  {
                      field: 'LiveTime', title: '入住时间', templet: d => { return util.toDateString(d.LiveTime.replace('/Date(', '').replace(')/', ''), 'yyyy-MM-dd HH:mm:ss') }
                  },
                  {
                      field: 'DischargeTime',
                      title: '出院时间',
                      templet: d => {
                          // 1. 提取原始时间戳
                          const timestamp = parseInt(d.LiveTime.replace('/Date(', '').replace(')/', ''))
                          // 2. 创建日期对象并加28天
                          const liveDate = new Date(timestamp)
                          const dischargeDate = new Date(liveDate.getTime() + (28 * 24 * 60 * 60 * 1000)) 
                          // 3. 格式化输出
                          return util.toDateString(dischargeDate, 'yyyy-MM-dd HH:mm:ss')
                      }
                  },
                  
                  { field: "State", title: "入住状态", templet: '#tplManager' },
                  { field: "SignState", title: "合同状态", templet: '#tplsignstate' },

              {
                fixed: "right",
                title: "操作",
                width: 134,
                minWidth: 125,
                  toolbar: "#barDemoContract",
              },
            ],
          ],
          done: function () {
            var id = this.id;
            // 下拉按钮测试
            dropdown.render({
              elem: "#dropdownButton", // 可绑定在任意元素中，此处以上述按钮为例
              data: [
                {
                  id: "add",
                  title: "添加",
                },
                {
                  id: "update",
                  title: "编辑",
                },
                {
                  id: "delete",
                  title: "删除",
                },
              ],
              // 菜单被点击的事件
              click: function (obj) {
                var checkStatus = table.checkStatus(id);
                var data = checkStatus.data; // 获取选中的数据
                  switch (obj.id) {


                  case "add":
                    layer.open({
                      title: "添加",
                      type: 2,
                      area: ["80%", "80%"],
                      content:
                        '',
                    });
                    break;
                  case "update":
                    if (data.length !== 1) return layer.msg("请选择一行");
                    layer.open({
                      title: "编辑",
                      type: 1,
                      area: ["80%", "80%"],
                      content:
                        '<div style="padding: 16px;">自定义表单元素</div>',
                    });
                    break;
                  case "delete":
                    if (data.length === 0) {
                      return layer.msg("请选择一行");
                    }
                    layer.msg("delete event");
                    break;
                }
              },
            });

            // 重载测试
            dropdown.render({
              elem: "#reloadTest", // 可绑定在任意元素中，此处以上述按钮为例
              data: [
                {
                  id: "reload",
                  title: "重载",
                },
                {
                  id: "reload-deep",
                  title: "重载 - 参数叠加",
                },
                {
                  id: "reloadData",
                  title: "仅重载数据",
                },
                {
                  id: "reloadData-deep",
                  title: "仅重载数据 - 参数叠加",
                },
              ],
              // 菜单被点击的事件
              click: function (obj) {
                switch (obj.id) {
                  case "reload":
                    // 重载 - 默认（参数重置）
                    table.reload("test", {
                      where: {
                        abc: "123456",
                        //test: '新的 test2',
                        //token: '新的 token2'
                      },
                      /*
                                        cols: [[ // 重置表头
                                          {type: 'checkbox', fixed: 'left'},
                                          {field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'},
                                          {field:'sex', title:'性别', width:80, edit: 'text', sort: true},
                                          {field:'experience', title:'积分', width:80, sort: true, totalRow: true, templet: '<div>{{= d.experience }} 分</div>'},
                                          {field:'logins', title:'登入次数', width:100, sort: true, totalRow: true},
                                          {field:'joinTime', title:'加入时间', width:120}
                                        ]]
                                        */
                    });
                    break;
                  case "reload-deep":
                    // 重载 - 深度（参数叠加）
                    table.reload(
                      "testContract",
                      {
                        where: {
                          abc: 123,
                              testContract: "新的 test1",
                        },
                        //defaultToolbar: ['print'], // 重载头部工具栏右侧图标
                        //cols: ins1.config.cols
                      },
                      true
                    );
                    break;
                  case "reloadData":
                    // 数据重载 - 参数重置
                        table.reloadData("testContract", {
                      where: {
                        abc: "123456",
                        //test: '新的 test2',
                        //token: '新的 token2'
                      },
                      scrollPos: "fixed", // 保持滚动条位置不变 - v2.7.3 新增
                      height: 2000, // 测试无效参数（即与数据无关的参数设置无效，此处以 height 设置无效为例）
                      //url: '404',
                      //page: {curr: 1, limit: 30} // 重新指向分页
                    });
                    break;
                  case "reloadData-deep":
                    // 数据重载 - 参数叠加
                    table.reloadData(
                      "testContract",
                      {
                        where: {
                          abc: 123,
                              testContract: "新的 test1",
                        },
                      },
                      true
                    );
                    break;
                }
                layer.msg("可观察 Network 请求参数的变化");
              },
            });

            // 行模式
            dropdown.render({
              elem: "#rowMode",
              data: [
                {
                  id: "default-row",
                  title: "单行模式（默认）",
                },
                {
                  id: "multi-row",
                  title: "多行模式",
                },
              ],
              // 菜单被点击的事件
              click: function (obj) {
                var checkStatus = table.checkStatus(id);
                var data = checkStatus.data; // 获取选中的数据
                switch (obj.id) {
                  case "default-row":
                        table.reload("testContract", {
                      lineStyle: null, // 恢复单行
                    });
                    layer.msg("已设为单行");
                    break;
                  case "multi-row":
                        table.reload("testContract", {
                      // 设置行样式，此处以设置多行高度为例。若为单行，则没必要设置改参数 - 注：v2.7.0 新增
                      lineStyle: "height: 95px;",
                    });
                    layer.msg("即通过设置 lineStyle 参数可开启多行");
                    break;
                }
              },
            });
          },
          error: function (res, msg) {
            console.log(res, msg);
          },
        });

        // 工具栏事件
            table.on("toolbar(testContract)", function (obj) {
                console.log(obj);
              switch (obj.event) {
                  case "add":
                      layer.open({
                          title: "添加",
                          type: 2,
                          area: ["80%", "80%"],
                          content: '', // 确保此路径正确
                      });
                      break;
                  case "search":
                      var ParturientName = $('input[name="ParturientName"]').val();
                      var ParturientPhone = $('input[name="ParturientPhone"]').val();
                      var PackageId = $('select[name="PackageId"]').val();
                    
                      table.reload('testContract', {
                          url: '/Contract/GetContractList',
                          where: {
                              ParturientName: ParturientName,
                              ParturientPhone: ParturientPhone,
                              PackageId: PackageId  

                          },
                          page: {
                              curr: 1
                          }
                      });
                      break;
                  default:
                      break;
              }
          var id = obj.config.id;
          var checkStatus = table.checkStatus(id);
          var othis = lay(this);
          switch (obj.event) {
            case "getCheckData":
              var data = checkStatus.data;
              layer.alert(layui.util.escape(JSON.stringify(data)));
              break;
            case "getData":
              var getData = table.getData(id);
              console.log(getData);
              layer.alert(layui.util.escape(JSON.stringify(getData)));
              break;
            case "LAYTABLE_TIPS":
              layer.alert("自定义工具栏图标按钮");
              break;
          }
        });
        // 表头自定义元素工具事件 --- 2.8.8+
            table.on("colTool(testContract)", function (obj) {
          var event = obj.event;
          console.log(obj);
          if (event === "email-tips") {
            layer.alert(layui.util.escape(JSON.stringify(obj.col)), {
              title: "当前列属性配置项",
            });
          }
        });

        // 触发单元格工具事件
            table.on("tool(testContract)", function (obj) {
          // 双击 toolDouble
          var data = obj.data; // 获得当前行数据
           console.log(obj)
            if (obj.event === "pay") {
                layer.open({
                    title: "支付页面",
                    type: 2,
                    area: ["80%", "80%"],
                    content: '/Contract/ContractPay/' + obj.data.Id,
                });
                }
               //zy 消费列表
                if (obj.event === "spend") {
                    //合同id
                    //console.log(obj.data.Id)
                    layer.open({
                        title: "消费列表页面",
                        type: 2,
                        area: ["80%", "80%"],
                        content: '/packagespend/packageservice?Id=' + obj.data.Id,
                    });
                }
              if (obj.event === "look") {
                  layer.open({
                      title: "查看",
                      type: 2,
                      area: ["80%", "80%"],
                      content: '',
                  });
          } else if (obj.event === "more") {
            // 更多 - 下拉菜单
            dropdown.render({
              elem: this, // 触发事件的 DOM 对象
              show: true, // 外部事件触发即显示
              data: [
                {
                  title: "查看",
                  id: "detail",
                },
                {
                  title: "删除",
                  id: "del",
                },
              ],
              click: function (menudata) {
                if (menudata.id === "detail") {
                  layer.msg("查看操作，当前行 ID:" + data.id);
                } else if (menudata.id === "del") {
                  layer.confirm(
                    "真的删除行 [id: " + data.id + "] 么",
                    function (index) {
                      obj.del(); // 删除对应行（tr）的DOM结构
                      layer.close(index);
                      // 向服务端发送删除指令
                    }
                  );
                }
              },
              align: "right", // 右对齐弹出
              style: "box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);", // 设置额外样式
            });
          }
        });

        // 触发表格复选框选择
            table.on("checkbox(testContract)", function (obj) {
          console.log(obj);
        });

        // 触发表格单选框选择
            table.on("radio(testContract)", function (obj) {
          console.log(obj);
        });

        // 行单击事件
            table.on("row(testContract)", function (obj) {
          //console.log(obj);
          //layer.closeAll('tips');
        });
        // 行双击事件
            table.on("rowDouble(testContract)", function (obj) {
          console.log(obj);
        });

        // 单元格编辑事件
            table.on("edit(testContract)", function (obj) {
          var field = obj.field; // 得到字段
          var value = obj.value; // 得到修改后的值
          var data = obj.data; // 得到所在行所有键值
          // 值的校验
          @*if (field === "email") {
            if (
              !/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(
                obj.value
              )
            ) {
              layer.tips("输入的邮箱格式不正确，请重新编辑", this, { tips: 1 });
              return obj.reedit(); // 重新编辑 -- v2.8.0 新增
            }
          }*@
          // 编辑后续操作，如提交更新请求，以完成真实的数据更新
          layer.msg("编辑成功", { icon: 1 });

          // 其他更新操作
          var update = {};
          update[field] = value;
          obj.update(update);
        });
      });
</script>
